<!DOCTYPE html>
<html lang="en">
<head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="indexStyle.css" type="text/css" >
</head>
<body>
<div class="container">
    <div class="navigation">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">主页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">还书&借阅记录</a>
            </li>
            <li class="nav-item" style="flex-grow: 1;">
            </li>
            <form class="form-inline nav-form pull-right">
                <input class="form-control" type="text" placeholder="请输入书名或作者名">
                <button class="btn btn-primary" type="submit">搜索
                </button>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="">注销</a>
                </li>
            </form>
        </ul>
    </div>

    <div class="hei"></div>

    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
            <div class="card-deck-wrapper">
                <div class = "row">
                    <div class = "col-md-3">
                        <div class = "card">
                            <div class = "card-body">
                                <img class="card-img-top" src="fishing.jpg" alt="Card image cap">
                                <h4 class = "card-title title">钓鱼</h4>
                                <h5 class = "text-right">zcy</h5>
                                <h6 class="text-right" >qsctech</h6>
                            </div>
                        </div>
                    </div>
                    <div class = "col-md-3">
                        <div class = "card">
                            <div class = "card-body">
                                <img class="card-img-top" src="fishing.jpg" alt="Card image cap">
                                <h4 class = "card-title title">钓鱼</h4>
                                <h5 class = "text-right">zcy</h5>
                                <h6 class="text-right" >qsctech</h6>
                            </div>
                        </div>
                    </div>
                    <div class = "col-md-3">
                        <div class = "card">
                            <div class = "card-body">
                                <img class="card-img-top" src="fishing.jpg" alt="Card image cap">
                                <h4 class = "card-title title">钓鱼</h4>
                                <h5 class = "text-right">zcy</h5>
                                <h6 class="text-right" >qsctech</h6>
                            </div>
                        </div>
                    </div>
                    <div class = "col-md-3">
                        <div class = "card">
                            <div class = "card-body">
                                <img class="card-img-top" src="fishing.jpg" alt="Card image cap">
                                <h4 class = "card-title title">钓鱼</h4>
                                <h5 class = "text-right">zcy</h5>
                                <h6 class="text-right" >qsctech</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hei"> </div>
                <div class = "row">
                    <div class = "col-md-3">
                        <div class = "card">
                            <div class = "card-body">
                                <img class="card-img-top" src="fishing.jpg" alt="Card image cap">
                                <h4 class = "card-title title">钓鱼</h4>
                                <h5 class = "text-right">zcy</h5>
                                <h6 class="text-right" >qsctech</h6>
                            </div>
                        </div>
                    </div>
                    <div class = "col-md-3">
                        <div class = "card">
                            <div class = "card-body">
                                <img class="card-img-top" src="fishing.jpg" alt="Card image cap">
                                <h4 class = "card-title title">钓鱼</h4>
                                <h5 class = "text-right">zcy</h5>
                                <h6 class="text-right" >qsctech</h6>
                            </div>
                        </div>
                    </div>
                    <div class = "col-md-3">
                        <div class = "card">
                            <div class = "card-body">
                                <img class="card-img-top" src="fishing.jpg" alt="Card image cap">
                                <h4 class = "card-title title">钓鱼</h4>
                                <h5 class = "text-right">zcy</h5>
                                <h6 class="text-right" >qsctech</h6>
                            </div>
                        </div>
                    </div>
                    <div class = "col-md-3">
                        <div class = "card">
                            <div class = "card-body">
                                <img class="card-img-top" src="fishing.jpg" alt="Card image cap">
                                <h4 class = "card-title title">钓鱼</h4>
                                <h5 class = "text-right">zcy</h5>
                                <h6 class="text-right" >qsctech</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class = "hei"></div>

            <div class = "con">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">

            <div class="list-group">
                <div class = "list-group-item list-group-item-action" style="height: 70px" >
                    <div  class = "row">
                        <div class = "col-md-2">
                            <div class="con">
                                <th style = "font-weight: bold">书名:</th>
                                <th>钓鱼</th>
                            </div>
                        </div>
                        <div class = "col-md-2">
                            <div class = "con">
                                <th style = "font-weight: bold">作者:</th>
                                <th>zcy</th>
                            </div>
                        </div>
                        <div class = "col-md-2">
                            <div class = "con">
                                <th style = "font-weight: bold">出版社:</th>
                                <th>qsctech</th>
                            </div>
                        </div>
                        <div class = "col-md-4"></div>
                        <div class = "col-md-2">
                            <div class="con">
                                <th style = "font-weight: bold">已归还</th>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hei"></div>
                <div class = "list-group-item list-group-item-action" style="height: 70px">
                    <div  class = "row">
                        <div class = "col-md-2">
                            <div class="con">
                                <th style = "font-weight: bold">书名:</th>
                                <th>钓鱼</th>
                            </div>
                        </div>
                        <div class = "col-md-2">
                            <div class = "con">
                                <th style = "font-weight: bold">作者:</th>
                                <th>zcy</th>
                            </div>
                        </div>
                        <div class = "col-md-2">
                            <div class = "con">
                                <th style = "font-weight: bold">出版社:</th>
                                <th>qsctech</th>
                            </div>
                        </div>
                        <div class = "col-md-4"></div>
                        <div class = "col-md-2">
                            <div class="con">
                                <button class = "btn btn-primary">还书</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>